<template>
  <el-card class="stats-card">
    <div class="card-content">
      <el-icon :size="32" class="card-icon">
        <icon class="iconfont icon-shouye1" />
      </el-icon>
      <div class="card-info">
        <div class="title">{{ title }}</div>
        <div class="value">{{ value }}</div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { defineProps } from "vue";

defineProps({
  title: String,
  value: Number,
  icon: String,
});
</script>

<style scoped>
.stats-card {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  color: #409eff;
  margin-right: 16px;
}

.card-info .title {
  font-size: 14px;
  color: #999;
}

.card-info .value {
  font-size: 24px;
  font-weight: bold;
}
</style>
